// Name:                     Button Group
//
// Description:              Define style for button group
//
// Component:                `.am-btn-group`
//
// Modifiers:                `.am-btn-group-stacked`
//
//
// Uses:                     Button
//                           Icon
//
// =============================================================================

/* ==========================================================================
   Component: Button Group
 ============================================================================ */

// Make the div behave like a button
.@{ns}btn-group, .@{ns}btn-group-stacked {
    position: relative;
    display: inline-block;
    vertical-align: middle; // match .@{ns}btn alignment given font-size hack above
    >.@{ns}btn {
        position: relative;
        float: left;
        // Bring the "active" button to the front
        &:hover, &:focus, &:active, &.active {
            z-index: 2;
        }
        &:focus {
            // Remove focus outline when dropdown JS adds it after closing the menu
            outline: 0;
        }
    }
}

// Prevent double borders when buttons are next to each other
// =============================================================================
.@{ns}btn-group {
    .@{ns}btn+.@{ns}btn, .@{ns}btn+.@{ns}btn-group, .@{ns}btn-group+.@{ns}btn, .@{ns}btn-group+.@{ns}btn-group {
        margin-left: -1px;
    }
    .hook-btn-group;
}

// Optional: Group multiple button groups together for a toolbar
.@{ns}btn-toolbar {
    margin-left: -5px; // Offset the first child's margin
    .clearfix();
    .@{ns}btn-group, .@{ns}input-group {
        float: left;
    }
    >.@{ns}btn, >.@{ns}btn-group, >.@{ns}input-group {
        margin-left: 5px;
    }
    .hook-btn-group-toolbar;
}

.@{ns}btn-group>.@{ns}btn:not(:first-child):not(:last-child):not(.@{ns}dropdown-toggle) {
    border-radius: 0;
}

// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.@{ns}btn-group>.@{ns}btn:first-child {
    margin-left: 0;
    &:not(:last-child):not(.@{ns}dropdown-toggle) {
        .border-right-radius(0);
    }
}

// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.@{ns}btn-group>.@{ns}btn:last-child:not(:first-child), .@{ns}btn-group>.@{ns}dropdown-toggle:not(:first-child) {
    .border-left-radius(0);
}

// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.@{ns}btn-group>.@{ns}btn-group {
    float: left;
}

.@{ns}btn-group>.@{ns}btn-group:not(:first-child):not(:last-child)>.@{ns}btn {
    border-radius: 0;
}

.@{ns}btn-group>.@{ns}btn-group:first-child {
    >.@{ns}btn:last-child, >.@{ns}dropdown-toggle {
        .border-right-radius(0);
    }
}

.@{ns}btn-group>.@{ns}btn-group:last-child>.@{ns}btn:first-child {
    .border-left-radius(0);
}

// Sizing
// =============================================================================
.@{ns}btn-group-xs {
    &>.@{ns}btn {
        .button-size(@btn-xs-font-size);
    }
    .hook-btn-group-xs;
}

.@{ns}btn-group-sm {
    &>.@{ns}btn {
        .button-size(@btn-sm-font-size);
    }
    .hook-btn-group-sm;
}

.@{ns}btn-group-lg {
    &>.@{ns}btn {
        .button-size(@btn-lg-font-size);
    }
    .hook-btn-group-lg;
}

// Stacked button group
// =============================================================================
.@{ns}btn-group-stacked {
    >.@{ns}btn, >.@{ns}btn-group, >.@{ns}btn-group>.@{ns}btn {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
    }
    // Clear floats so dropdown menus can be properly placed
    >.@{ns}btn-group {
        .clearfix();
        >.@{ns}btn {
            float: none;
        }
    }
    >.@{ns}btn+.@{ns}btn, >.@{ns}btn+.@{ns}btn-group, >.@{ns}btn-group+.@{ns}btn, >.@{ns}btn-group+.@{ns}btn-group {
        margin-top: -1px;
        margin-left: 0;
    }
    .hook-btn-group-stacked;
}

.@{ns}btn-group-stacked>.@{ns}btn {
    &:not(:first-child):not(:last-child) {
        border-radius: 0;
    }
    &:first-child:not(:last-child) {
        border-top-right-radius: @global-radius;
        .border-bottom-radius(0);
    }
    &:last-child:not(:first-child) {
        border-bottom-left-radius: @global-radius;
        .border-top-radius(0);
    }
}

.@{ns}btn-group-stacked>.@{ns}btn-group:not(:first-child):not(:last-child)>.@{ns}btn {
    border-radius: 0;
}

.@{ns}btn-group-stacked>.@{ns}btn-group:first-child:not(:last-child) {
    >.@{ns}btn:last-child, >.@{ns}dropdown-toggle {
        .border-bottom-radius(0);
    }
}

.@{ns}btn-group-stacked>.@{ns}btn-group:last-child:not(:first-child)>.@{ns}btn:first-child {
    .border-top-radius(0);
}

// Justify button group
// =============================================================================
.@{ns}btn-group-justify {
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    width: 100%;
    // display: flex;
    >.@{ns}btn, >.@{ns}btn-group {
        float: none;
        display: table-cell;
        width: 1%;
        // flex: 1;
    }
    >.@{ns}btn-group .@{ns}btn {
        width: 100%;
    }
    .hook-button-group-justify;
}

// Dropdown button group
// =============================================================================
.@{ns}btn-group {
    .@{ns}dropdown {
        float: left;
        margin-left: -1px;
        >.@{ns}btn {
            .border-left-radius(0);
        }
    }
    .@{ns}active .@{ns}dropdown-toggle {
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        // Show no shadow for `.btn-link` since it has no other button styles.
        &.@{ns}btn-link {
            box-shadow: none;
        }
    }
    .@{ns}dropdown-toggle:active, .@{ns}active .@{ns}dropdown-toggle {
        outline: 0;
    }
}

// Checkbox and radio options
// for JS Button plugin
// .@{ns}btn-group-check added for Amaze UI react
// =============================================================================
[data-am-button]>.@{ns}btn>input[type="radio"], [data-am-button]>.@{ns}btn>input[type="checkbox"], .@{ns}btn-group-check>.@{ns}btn>input[type="radio"], .@{ns}btn-group-check>.@{ns}btn>input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

// Hooks
// =============================================================================
.hook-btn-group() {}

.hook-btn-group-stacked() {}

.hook-btn-group-toolbar() {}

.hook-button-group-justify() {}

.hook-btn-group-lg() {}

.hook-btn-group-sm() {}

.hook-btn-group-xs() {}
